<template>
	<view>
		<!-- 收银台 -->
		<view class="edgeInsetTop"></view>
		<view class="wanl-pay">
			<view class="price-box">
				<text class="wanl-pip text-price margin-top-sm">{{price}}</text>
			</view>
			<view class="list-box">
				<view class="item" v-for="(item, index) in payList" :key="index">
					<text :class="'wlIcon-'+ item.type +'-pay'"></text>
					<view class="action">
						<text class="title wanl-pip">{{item.name}}</text>
						<view v-if="item.type == 'balance'">
							<text v-if="isbalance">可用余额 ￥{{user.money}}</text>
							<text v-else>余额不足，可用余额 ￥{{user.money}}</text>
						</view>
						<view v-else>{{item.describe}}</view>
					</view>
					<view class="radio text-xxl" v-if="item.state" @tap="onSelect(index)">
						<text v-if="item.select" class="wlIcon-xuanze-danxuan wanl-orange"></text>
						<text v-else class="wlIcon-xuanze wanl-gray-light"></text>
					</view>
					<view class="radio text-xxl" v-else>
						<text class="wlIcon-xuanze-danxuan wanl-gray-light"></text>
					</view>
				</view>
			</view>
			<view v-if="disabled">
				<button class="mix-btn wanl-bg-redorange"> <text
						class="wlIcon-jiazai wlIconfont-spin margin-right-xs"></text>正在支付中... </button>
			</view>
			<view v-else>
				<button v-if="payNum == 1" class="mix-btn wanl-bg-redorange" @tap="confirm()"> 确认支付 </button>
				<button v-else class="mix-btn wanl-bg-redorange" @tap="confirm()"> 合并支付 </button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {


				token: '',
				disabled: false,
				price: '0.00',
				isbalance: true,
				order_type: 'goods',
				//order_no: '',
				//order_pay_no: '',
				payNum: 1, // 支付方式 独立支付-合并支付
				payList: [],


				price_id: 0,
				local_id: 0,
				currentBalance: 0,
			}
		},
		computed: {
			...mapState(['user'])
		},
		watch: {

		},
		async onLoad(options) {

			let price_id = options.price_id;
			let local_id = options.local_id;
			this.price_id = price_id;
			this.local_id = local_id;


			await uni.request({
				url: '/wanlshop/pay/getBalance',
				method: 'POST',
				success: res => {
					this.$store.commit('user/setUserInfo', {
						money: res.data.money
					});
					this.currentBalance = res.data.money
					let params = {
						price_id
					}
					uni.request({
						url: "/wanlshop/local_life/cardInfo",
						method: "POST",
						data: params,
						success: res => {
							this.price = res.data.price
							this.isbalance = (this.currentBalance * 1000 > this.price * 1000);
							this.getPayment();
						}
					})
				}
			});





		},
		methods: {
			getPayment() {
				let method = 'wap';
				// #ifdef APP-PLUS
				method = 'app';
				// #endif
				// #ifdef MP-BAIDU
				method = 'mini';
				// #endif
				// #ifdef MP-WEIXIN
				method = 'miniapp';
				// #endif
				// #ifdef MP-ALIPAY
				method = 'mini';
				// #endif
				// #ifdef MP-QQ
				method = 'mini';
				// #endif
				this.payList = [{
					name: '余额支付',
					describe: '',
					type: 'balance',
					method: 'balance',
					state: this.isbalance ? true : false, // 是否可用
					select: this.isbalance ? true : false // 是否选中
				}];
				//如果是H5支付
				// #ifdef H5
				if (this.$jssdk.isWechat()) {
					this.payList.push({
						name: '公众号支付',
						describe: '推荐使用公众号支付',
						type: 'wechat',
						method: 'mp',
						state: true,
						select: this.isbalance ? false : true
					});
				} else {
					this.payList.push({
						name: '支付宝',
						describe: '',
						type: 'alipay',
						method: method,
						state: true,
						select: false
					}, {
						name: '微信支付',
						describe: '推荐使用微信支付',
						type: 'wechat',
						method: method,
						state: true,
						select: this.isbalance ? false : true
					});
				}
				// #endif
				//如要不是H5支付
				// #ifndef H5
				uni.getProvider({
					service: "payment",
					success: (e) => {
						e.provider.map((value) => {
							if (value == 'alipay') {
								let obj = {
									name: '支付宝',
									describe: '',
									type: value,
									method: method,
									state: true,
									select: false
								}
								if (this.payList.findIndex(item => item.type == 'alipay') === -1) {
									this.payList.push({
										name: '支付宝',
										describe: '',
										type: value,
										method: method,
										state: true,
										select: false
									});
								}

							} else if (value == 'wxpay') {
								this.payList.push({
									name: '微信支付',
									describe: '推荐使用微信支付',
									type: 'wechat',
									method: method,
									state: true,
									select: this.isbalance ? false : true
								});
							} else if (value == 'baidu') {
								this.payList.push({
									name: '百度收银台',
									describe: '',
									type: value,
									method: method,
									state: true,
									select: false
								});
							} else if (value == 'appleiap') {
								this.payList.push({
									name: 'Apple支付',
									describe: '',
									type: 'apple',
									method: method,
									state: true,
									select: false
								});
							}
						})
					}
				});
				// #endif

			},
			//确认支付
			confirm() {
				let data = null;
				if (this.disabled) {
					return;
				}
				this.payList.map((value, index, array) => {
					if (value.select) {
						data = value;
					} else {
						return;
					}
				});
				// 判断支付是否存在
				if (!data) {
					uni.showModal({
						content: "请选择支付方式",
						showCancel: false
					});
					return;
				} else {
					
					if(data.type == "balance"){
						//this.disabled = true;
						//使用余额支付
						let params = {
							local_id:this.local_id,
							price_id:this.price_id
						}
						uni.request({
							url:"/wanlshop/local_life/localpaywithbalance",
							method:"POST",
							data:params,
							success:res=>{
								if(res.res.code == 1){
									uni.showToast({
										title:"发布成功",
										icon:'success'
									});
									setTimeout(()=>{
										uni.switchTab({
											url:"/pages/local"
										})
									},2000)
								}
							}
						})
						
						
					}else{
						this.disabled = true;
						// 获取小程序code
						// #ifdef MP
						uni.login({
							success: (e) => {
								this.wanlPay(data, e.code);
							},
							fail: (e) => {
								uni.showModal({
									content: "无法获取微信code,原因为: " + e.errMsg,
									showCancel: false
								})
							}
						})
						// #endif
					}
					
					
				}
			},


			async wanlPay(data, code = null) {
				await uni.request({
					url: '/wanlshop/pay/recharge',
					method: 'POST',
					data: {
						type: data.type,
						method: data.method,
						code: code,
						money: this.price,
						local_id: this.local_id
					},
					success: res => {
						switch (data.type) {
							case 'wechat':
								// 微信 H5支付
								if (data.method == 'wap') {
									// 关闭loading
									this.loading = false;
									uni.showModal({
										title: '微信支付',
										content: '是否已完成支付',
										success: (res) => {
											if (res.confirm) {
												this.paySuccess();
											} else if (res.cancel) {
												console.log('用户点击取消');
											}
										}
									});
									// 异步查询是否支付成功
									window.location.href = res.data;
									// 微信 APP支付
								} else if (data.method == 'app') {
									uni.requestPayment({
										provider: 'wxpay',
										orderInfo: res.data,
										success: (e) => {
											this.paySuccess();
										},
										fail: (e) => {
											uni.showModal({
												content: "支付失败,原因为: " + e.errMsg,
												showCancel: false
											})
										},
										complete: () => {
											this.loading = false;
											this.disabled = false;
										}
									})
									// 微信 小程序支付
								} else if (data.method == 'miniapp') {
									uni.requestPayment({
										appId: res.data.appId,
										nonceStr: res.data.nonceStr,
										package: res.data.package,
										paySign: res.data.paySign,
										signType: res.data.signType,
										timeStamp: res.data.timeStamp,
										success: (e) => {
											this.paySuccess();
										},
										fail: (e) => {
											uni.showModal({
												content: "支付失败,原因为: " + e.errMsg,
												showCancel: false
											})
										},
										complete: () => {
											this.loading = false;
											this.disabled = false;
										}
									})
									// 微信 公众平台支付
								} else if (data.method == 'mp') {
									this.$jssdk.wxpay({
										data: res.data,
										success: e => {
											this.paySuccess();
										},
										fail: err => {
											if (err.errMsg == "chooseWXPay:ok") {
												this.$wanlshop.msg('支付成功');
											} else if (err.errMsg == "chooseWXPay:cancel") {
												this.$wanlshop.msg('支付失败，取消支付');
											} else if (err.errMsg == "chooseWXPay:fail") {
												this.$wanlshop.msg('支付失败');
											}
										}
									})
								}
								break;
							case 'alipay':
								if (data.method == 'wap') {
									// 关闭loading
									this.loading = false;
									document.write(res.data);
								} else if (data.method == 'app') {
									uni.requestPayment({
										provider: 'alipay',
										orderInfo: res.data,
										success: (e) => {
											this.paySuccess();
										},
										fail: (e) => {
											uni.showModal({
												content: "支付失败,原因为: " + e.errMsg,
												showCancel: false
											})
										},
										complete: () => {
											this.loading = false;
											this.disabled = false;
										}
									})
								}
								break;
						}
					}
				});
			},


			// async wanlPay(data, code = null){
			// 	await uni.request({
			// 		url: '/wanlshop/pay/payment',
			// 		method: 'POST',
			// 		data: {
			// 			order_type: this.order_type,
			// 			type: data.type,
			// 			method: data.method,
			// 			code: code,
			// 			order_id: this.order_id,
			// 			token: this.token
			// 		},
			// 		success: res => {
			// 			// 余额支付/小程序支付
			// 			switch (data.type) {
			// 			    case 'balance':
			// 			        this.$store.commit('user/setUserInfo', {
			// 			        	money: this.$wanlshop.bcsub(this.$store.state.user.money, this.price)
			// 			        });
			// 			        this.paySuccess();
			// 			        break;
			// 			    case 'wechat':
			// 					// 微信 H5支付
			// 			        if(data.method == 'wap'){
			// 			        	setTimeout(() => {
			// 			        		uni.showModal({
			// 			        		    content: '请确认微信支付是否已完成',
			// 			        			confirmText: '已完成',
			// 			        			cancelText: '重新支付',
			// 			        		    success: response=> {
			// 			        		        if (response.confirm) {
			// 			        		            this.paySuccess();
			// 			        		        } else if (response.cancel) {
			// 			        		            this.confirm();
			// 			        		        }
			// 			        		    }
			// 			        		});
			// 			        	}, 2000);
			// 			        	// 异步查询是否支付成功
			// 			        	window.location.href = res.data;
			// 					// 微信 APP支付
			// 					}else if(data.method == 'app'){
			// 						uni.requestPayment({
			// 						    provider: 'wxpay',
			// 						    orderInfo: res.data,
			// 						    success: (e) => {
			// 						        console.log("success", e);
			// 						        this.paySuccess();
			// 						    },
			// 						    fail: (e) => {
			// 						        uni.showModal({
			// 						            content: "支付失败,原因为: " + e.errMsg,
			// 						            showCancel: false
			// 						        })
			// 						    },
			// 						    complete: () => {
			// 								this.disabled = false;
			// 						    }
			// 						})
			// 					// 微信 小程序支付
			// 			        }else if(data.method == 'miniapp'){
			// 						uni.requestPayment({
			// 						    appId: res.data.appId,
			// 						    nonceStr: res.data.nonceStr,
			// 						    package: res.data.package,
			// 						    paySign: res.data.paySign,
			// 							signType: res.data.signType,
			// 							timeStamp: res.data.timeStamp,
			// 						    success: (e) => {
			// 						        this.paySuccess();
			// 						    },
			// 						    fail: (e) => {
			// 						        uni.showModal({
			// 						            content: "支付失败,原因为: " + e.errMsg,
			// 						            showCancel: false
			// 						        })
			// 						    }
			// 						})
			// 					// 微信 公众平台支付
			// 					}else if(data.method == 'mp'){
			// 						this.$jssdk.wxpay({
			// 							data: res.data,
			// 							success: e => {
			// 								this.paySuccess();
			// 							},
			// 							fail: err => {
			// 								if (err.errMsg == "chooseWXPay:ok") {
			// 									this.$wanlshop.msg('支付成功');
			// 								}else if (err.errMsg == "chooseWXPay:cancel") {
			// 									this.$wanlshop.msg('支付失败，取消支付');
			// 								}else if (err.errMsg == "chooseWXPay:fail") {
			// 									this.$wanlshop.msg('支付失败');
			// 								}
			// 							}
			// 						})
			// 					}
			// 			        break;
			// 			    case 'alipay':
			// 			        if(data.method == 'wap'){
			// 						this.disabled = false;
			// 						if(this.order_type === 'goods'){
			// 							this.$store.commit('statistics/order', {
			// 								pay: this.$wanlshop.bcsub(this.$store.state.statistics.order.pay, this.payNum),
			// 								delive: this.$wanlshop.bcadd(this.$store.state.statistics.order.delive, this.payNum)
			// 							});
			// 						}
			// 						document.write(res.data);
			// 					}else if(data.method == 'app'){
			// 						uni.requestPayment({
			// 						    provider: 'alipay',
			// 						    orderInfo: res.data,
			// 						    success: (e) => {
			// 						        console.log("success", e);
			// 						        this.paySuccess();
			// 						    },
			// 						    fail: (e) => {
			// 						        uni.showModal({
			// 						            content: "支付失败",
			// 						            showCancel: false,
			// 									success: function (res) {
			// 										if (res.confirm) {
			// 											uni.navigateTo({
			// 												url:'/pages/user/order/order?state=1'
			// 											})
			// 										}
			// 									}
			// 						        })
			// 						    },
			// 						    complete: () => {
			// 								this.disabled = false;
			// 						    }
			// 						})
			// 					}
			// 					break;
			// 			} 
			// 		}
			// 	});
			// },


			onSelect(key) {
				this.payList.map((value, index, array) => {
					if (index == key) {
						value.select = !value.select;
					} else {
						value.select = false;
					}
				});
			},
			// 支付成功
			paySuccess() {
				this.disabled = false;
				uni.showToast({
					title:"支付成功",
					icon:'success'
				})
				setTimeout(()=>{
					uni.switchTab({
						url:"/pages/local"
					})
				},3000)
				
			}
		}
	}
</script>

<style>
	page {
		background-color: white;
	}

	radio-group {
		display: block;
	}
</style>